﻿<template>
    <el-dialog title="纠正和预防措施处理单" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true"
        class="SHZY-dialog SHZY-dialog_center" lock-scroll width="60%">
        <el-row :gutter="15" class="" :style="{ margin: '0 auto', width: '100%' }">
            <el-form ref="elForm" size="small" label-width="100px" label-position="left" :model="dataForm"
                :rules="rules">


                <el-col :span="24">
                    <el-form-item label-width="200" label="不合格描述(发现单位填写):" prop="nonDescription">

                        <el-input v-model='dataForm.nonDescription' type="textarea" maxlength="500" show-word-limit
                            placeholder='请输入内容' clearable :style='{ "width": "100%" }' :rows="3">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="0">
                        <groupTitle content-position="left" content="不合格/图片">
                        </groupTitle>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="0">

                        <el-table :data="dataForm.ImageList" size='mini' border>

                            <el-table-column prop="fileInfo" label="文件信息">

                                <template slot-scope="scope">
                                    <el-image style="width: 50px; height: 50px;cursor: pointer;" :src="url" fit="cover"
                                        @click="downimage(scope.row.fileInfo)"></el-image>

                                </template>
                            </el-table-column>
                            <el-table-column prop="remark" label="备注">

                                <template slot-scope="scope">
                                    <el-input v-model='scope.row.remark' placeholder='备注' clearable required
                                        :style='{ "width": "100%" }' disabled>
                                    </el-input>
                                </template>
                            </el-table-column><el-table-column prop="creatorUserId" label="上传人">

                                <template slot-scope="scope">
                                    <el-input v-model='scope.row.creatorUserId' placeholder='上传人' clearable required
                                        :style='{ "width": "100%" }' disabled>
                                    </el-input>
                                </template>
                            </el-table-column><el-table-column prop="creatorTime" label="上传日期">

                                <template slot-scope="scope">
                                    <el-date-picker v-model='scope.row.creatorTime' placeholder='请选择' clearable
                                        :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd'
                                        value-format='timestamp' disabled>
                                    </el-date-picker>

                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text"
                                        @click="addHandleQmsEntityList(scope.row.id, '3')">编辑</el-button>
                                    <el-button size="mini" type="text" class="SHZY-table-delBtn"
                                        @click="handleDelQmsEntityList(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="table-actions" @click="addHandleQmsEntityList('', '3')">
                            <el-button type="text" icon="el-icon-plus">新增</el-button>
                        </div>
                    </el-form-item>
                </el-col>


                <el-col :span="24">
                    <el-form-item label-width="200" label="根源分析：" prop="causeAnalysis">

                        <el-input v-model='dataForm.causeAnalysis' type="textarea" maxlength="500" show-word-limit
                            placeholder='请输入内容' clearable :style='{ "width": "100%" }' :rows="3">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="24">
                    <el-form-item label="纠正(预防)措施及预定完成日期" prop="completionDate" label-width="240px">

                        <el-date-picker v-model='dataForm.completionDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="纠正已经发生的不良品(1小时给出)" prop="nonGood" label-width="240px">
                        <el-input v-model='dataForm.nonGood' placeholder='请输入内容' clearable :style='{ "width": "100%" }'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="0">
                        <div style="display: flex; margin-left: 10px;">

                            <el-checkbox label="成品数量" v-model='dataForm.isFinish' :true-label="1" :false-label="0"
                                @change="isFinshChange"></el-checkbox>
                            <el-input v-model='dataForm.finishQty' placeholder='请输入' clearable
                                style=" margin-left: 10px;">
                            </el-input>


                        </div>

                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="责任人" prop="finishResponsibleUserId"
                        :rules="showfinishResponsibleUserId == false ? rules.finishResponsibleUserId : [{ required: false, message: '责任人', trigger: 'change' }]">

                        <user-select v-model='dataForm.finishResponsibleUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="完成日期" prop="finishCompletionDate"
                        :rules="showfinishResponsibleUserId == false ? rules.finishCompletionDate : [{ required: false, message: '完成日期', trigger: 'change' }]">


                        <el-date-picker v-model='dataForm.finishCompletionDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>

                    </el-form-item>
                </el-col>


                <el-col :span="8">
                    <el-form-item label-width="0">
                        <div style="display: flex; margin-left: 10px;">
                            <el-checkbox label="半成品数量" v-model='dataForm.isSemi' :true-label="1" :false-label="0"
                                @change="isSemiChange"></el-checkbox>
                            <el-input v-model='dataForm.semiQty' placeholder='请输入' clearable
                                style=" margin-left: 10px;">
                            </el-input>

                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="责任人" prop="semiResponsibleUserId"
                        :rules="showsemiResponsibleUserId == false ? rules.semiResponsibleUserId : [{ required: false, message: '责任人', trigger: 'change' }]">

                        <user-select v-model='dataForm.semiResponsibleUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>


                <el-col :span="8">
                    <el-form-item label="完成日期" prop="semiCompletionDate"
                        :rules="showsemiResponsibleUserId == false ? rules.semiCompletionDate : [{ required: false, message: '完成日期', trigger: 'change' }]">
                        <el-date-picker v-model='dataForm.semiCompletionDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label-width="0">
                        <div style="display: flex; margin-left: 10px;">
                            <el-checkbox label="库存数量" v-model='dataForm.isInventory' :true-label="1" :false-label="0"
                                @change="isInventoryChange"></el-checkbox>
                            <el-input v-model='dataForm.inventoryQty' placeholder='请输入' clearable
                                style=" margin-left: 10px;">
                            </el-input>

                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="责任人" prop="inventoryResponsibleUserId"
                        :rules="showinventoryResponsibleUserId == false ? rules.inventoryResponsibleUserId : [{ required: false, message: '责任人', trigger: 'change' }]">

                        <user-select v-model='dataForm.inventoryResponsibleUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>


                <el-col :span="8">
                    <el-form-item label="完成日期" prop="inventoryCompletionDate"
                        :rules="showinventoryResponsibleUserId == false ? rules.inventoryCompletionDate : [{ required: false, message: '完成日期', trigger: 'change' }]">
                        <el-date-picker v-model='dataForm.inventoryCompletionDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label-width="0">
                        <div style="display: flex; margin-left: 10px;">
                            <el-checkbox label="其他" v-model='dataForm.isOther' :true-label="1" :false-label="0"
                                @change="isOtherChange"></el-checkbox>
                            <el-input v-model='dataForm.otherQyt' placeholder='请输入' clearable
                                style=" margin-left: 10px;" required>
                            </el-input>

                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="责任人" prop="otherResponsibleUserId"
                        :rules="showotherResponsibleUserId == false ? rules.otherResponsibleUserId : [{ required: false, message: '责任人', trigger: 'change' }]">

                        <user-select v-model='dataForm.otherResponsibleUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>


                <el-col :span="8">
                    <el-form-item label="完成日期" prop="otherCompletionDate"
                        :rules="showotherResponsibleUserId == false ? rules.otherCompletionDate : [{ required: false, message: '完成日期', trigger: 'change' }]">
                        <el-date-picker v-model='dataForm.otherCompletionDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>
                    </el-form-item>
                </el-col>




                <el-col :span="24">
                    <el-form-item label-width="200" label="纠正(预防)措施24小时内给出:" prop="measureRemark">

                        <el-input v-model='dataForm.measureRemark' type="textarea" maxlength="500" show-word-limit
                            placeholder='请输入内容' clearable :style='{ "width": "100%" }' :rows="3">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="8">
                    <el-form-item label="责任人" prop="measureResponsibleUserId">

                        <user-select v-model='dataForm.measureResponsibleUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="完成日期" prop="measureCompletionDate">
                        <el-date-picker v-model='dataForm.measureCompletionDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>
                    </el-form-item>
                </el-col>




                <el-col :span="24">
                    <el-form-item label-width="200" label="跟踪验证与效果评估:" prop="evaluationRemark">

                        <el-input v-model='dataForm.evaluationRemark' type="textarea" maxlength="500" show-word-limit
                            placeholder='请输入内容' clearable :style='{ "width": "100%" }' :rows="3">
                        </el-input>
                    </el-form-item>

                </el-col>


                <el-col :span="8">
                    <el-form-item label="确认责任人" prop="evaluationResponsibleUserId">

                        <user-select v-model='dataForm.evaluationResponsibleUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="完成日期" prop="evaluationCompletionDate">
                        <el-date-picker v-model='dataForm.evaluationCompletionDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>
                    </el-form-item>
                </el-col>



            </el-form>
        </el-row>

        <span slot="footer" class="dialog-footer">

            <el-button :loading="saveLoading" type="success" @click="dataFormSave()">保 存</el-button>
            <el-button :loading="btnLoading" type="primary" @click="dataFormSubmit()">确 定</el-button>
        </span>

        <file v-if="fileVisible" ref="file" @confirm="FileConfirm" />
    </el-dialog>

</template>

<script>

import customerAPI from '@/api/q1/business/customer';
import file from './file.vue'
export default {
    components: { file },
    data() {
        return {
            url: require('@/assets/images/icon_file.png'),
            fileVisible: false,
            btnLoading: false,
            saveLoading: false,
            visible: false,
            showfinishResponsibleUserId: true,
            showsemiResponsibleUserId: true,
            showinventoryResponsibleUserId: true,
            showotherResponsibleUserId: true,
            dataForm:
            {
                CustomerId: undefined,

                ImageList: [

                ],
                nonDescription: undefined,
                causeAnalysis: undefined,
                completionDate: undefined,
                nonGood: undefined,
                isFinish: undefined,
                finishQty: undefined,
                finishResponsibleUserId: undefined,
                finishCompletionDate: undefined,
                isSemi: undefined,
                semiQty: undefined,
                semiResponsibleUserId: undefined,
                semiCompletionDate: undefined,
                isInventory: undefined,
                inventoryQty: undefined,
                inventoryResponsibleUserId: undefined,
                inventoryCompletionDate: undefined,
                isOther: undefined,
                otherQyt: undefined,
                otherResponsibleUserId: undefined,
                otherCompletionDate: undefined,
                measureRemark: undefined,
                measureResponsibleUserId: undefined,
                measureCompletionDate: undefined,
                evaluationRemark: undefined,
                evaluationResponsibleUserId: undefined,
                evaluationCompletionDate: undefined,

            },
            rules: {
                nonDescription: [{ required: true, message: '请填写不合格描述', trigger: 'blur', },],
                causeAnalysis: [{ required: true, message: '请填写根源分析', trigger: 'blur', },],
                completionDate: [{ required: true, message: '请选择纠正（预防）措施及预定完成日期', trigger: 'blur', },],
                nonGood: [{ required: true, message: '请填写以纠正不良品', trigger: 'blur', },],
                finishQty: [{ required: true, message: '请填写成品数量', trigger: 'blur', }, { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/, message: '请输入正确的数字', trigger: 'blur' },],
                finishResponsibleUserId: [{ required: true, message: '请填写责任人', trigger: 'blur', },],
                finishCompletionDate: [{ required: true, message: '请选择完成日期', trigger: 'blur', },],
                semiQty: [{ required: true, message: '请填写半成品数量', trigger: 'blur', }, { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/, message: '请输入正确的数字', trigger: 'blur' },],
                semiResponsibleUserId: [{ required: true, message: '请填写责任人', trigger: 'blur', },],
                semiCompletionDate: [{ required: true, message: '请选择完成日期', trigger: 'blur', },],
                inventoryQty: [{ required: true, message: '请填写库存数量', trigger: 'blur', }, { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/, message: '请输入正确的数字', trigger: 'blur' },],
                inventoryResponsibleUserId: [{ required: true, message: '请填写责任人', trigger: 'blur', },],
                inventoryCompletionDate: [{ required: true, message: '请选择完成日期', trigger: 'blur', },],
                otherQyt: [{ required: true, message: '请填写其他', trigger: 'blur', },],
                otherResponsibleUserId: [{ required: true, message: '请填写责任人', trigger: 'blur', },],
                otherCompletionDate: [{ required: true, message: '请选择完成日期', trigger: 'blur', },],
                measureRemark: [{ required: true, message: '请填写纠正预防措施', trigger: 'blur', },],
                measureResponsibleUserId: [{ required: true, message: '请填写责任人', trigger: 'blur', },],
                measureCompletionDate: [{ required: true, message: '请填写完成日期', trigger: 'blur', },],

                evaluationRemark: [{ required: true, message: '请填写跟踪验证与效果评估', trigger: 'blur', },],
                evaluationResponsibleUserId: [{ required: true, message: '请填写责任人', trigger: 'blur', },],
                evaluationCompletionDate: [{ required: true, message: '请填写完成日期', trigger: 'blur', },],
            },


        }
    },
    created() {

    },
    methods: {

        init(data) {


            this.visible = true
            this.$nextTick(() => {
                this.$refs['elForm'].resetFields();
                customerAPI.getqmsbusicustomermeasure(data.id).then(res => {

                    this.dataForm = res.data
                    this.dataForm.CustomerId = data.id
                    this.dataForm.enabledMark = 1

                    if (this.dataForm.evaluationResponsibleUserId) {

                        this.dataForm.evaluationResponsibleUserId = data.creatorUserId
                    }
                })

            })
        },

        addHandleQmsEntityList(id, type) {

            if (this.dataForm.CustomerId) {
                this.fileVisible = true;
                this.$nextTick(() => {
                    this.$refs.file.init(this.dataForm.CustomerId, id, type)
                })
            }
            else {
                this.$message({
                    message: '请先保存,再添加文件',
                    type: 'error',
                    duration: 1000,

                })

            }
        },
        handleDelQmsEntityList(id) {

            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                type: 'warning'
            }).then(() => {
                customerAPI.deleteqmsbusicustomerfile(id).then(res => {

                    console.log(res)
                    this.dataForm.ImageList = res.data.ImageList2;
                })
            }).catch(() => {
            });
        },
        dataFormSubmit() {
            this.$refs['elForm'].validate((valid) => {
                if (valid) {
                    this.btnLoading = true
                    const formMethod = !this.dataForm.id ? customerAPI.qmsbusicustomermeasure : customerAPI.updateqmsbusicustomermeasure;
                    formMethod(this.dataForm).then((res) => {

                        if (res.code == 200) {

                            let query = {
                                formDataId: this.dataForm.id,
                                printConfigId: '575213750031221958',
                                formCustomerId: this.dataForm.CustomerId,
                                type: 'Complaint',
                                title: "客诉-客户名称-质量申诉",
                                context: '请查阅附件，请审批',
                                ...this.dataForm

                            }

                            customerAPI.SubmitMeasure(query).then(res => {
                                this.btnLoading = false;
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () => {
                                        this.visible = false
                                        this.$emit('refresh', true)
                                    }
                                })

                            })

                        }

                    }).catch((res) => {
                        this.btnLoading = false;
                    })
                }
            });

        },
        dataFormSave() {

            // this.$refs['elForm'].validate((valid) => {
            //     if (valid) {
            this.saveLoading = true
            const formMethod = !this.dataForm.id ? customerAPI.qmsbusicustomermeasure : customerAPI.updateqmsbusicustomermeasure;
            formMethod(this.dataForm).then((res) => {
                this.saveLoading = false;
                this.$message({
                    message: res.msg,
                    type: 'success',
                    duration: 1000,
                    onClose: () => {
                        this.visible = false
                        this.$emit('refresh', true)
                    }
                })
            }).catch((res) => {
                this.saveLoading = false;
            })
            //     }
            // });

        },
        FileConfirm(res) {

            console.log(res)

            this.dataForm.ImageList = res.ImageList2;


        },
        downimage(file) {
            console.log(file)
            console.log(file[0].url)
            this.shzy.downloadFile(file[0].url)
        },
        isFinshChange(val) {
            if (val == 1) {
                this.showfinishResponsibleUserId = false
            } else {
                this.showfinishResponsibleUserId = true
            }
        },
        isSemiChange(val) {
            if (val == 1) {
                this.showsemiResponsibleUserId = false
            } else {
                this.showsemiResponsibleUserId = true
            }
        },
        isInventoryChange(val) {
            if (val == 1) {
                this.showinventoryResponsibleUserId = false
            } else {
                this.showinventoryResponsibleUserId = true
            }
        },
        isOtherChange(val) {
            if (val == 1) {
                this.showotherResponsibleUserId = false
            } else {
                this.showotherResponsibleUserId = true
            }
        }


    }
}
</script>